<template>
    <div class="login2">
        <div class="wrap w">
            <div class="leftbox">
                <Item :data="data" />
                <Nav :scroll="scrollTo" />
            </div>
            <div class="rightbox">
                <IpoHeader />
                <IpoNav ref="ipoNav" :scroll="scrollTo" v-if="data != null" />
                <div class="content" ref="content" @scroll="contentScroll" v-if="data != null">
                    <IpoContent ref="i0" :info="information11" :title="$t('ipo.CompanyInformation')" />
                    <IpoContent ref="i1" :info="TypeOfListing11" :title="$t('ipo.TypeofListing.TypeofListing')" />
                    <IpoContent ref="i2" :info="Offerings11" :title="$t('ipo.Offering.Offering')" />
                    <IpoContent ref="i3" :info="Advisers11" :title="$t('ipo.advisers.Adviser')" />
                    <IpoContent ref="i4" :info="Timetable11" :title="$t('ipo.Timetable.Timetable')" />
                    <IpoContent ref="i5" :info="Documents11" :title="$t('ipo.Documents.Documents')" />
                    <IpoContent ref="i6" :info="Transaction11" :title="$t('ipo.TransactionCosts.TransactionCosts')" />
                </div>
                <div v-else style="display: flex;align-items: center;width: 100vw;height: 90vh;justify-content: center;">
                    <div style="color:#1f4055 ;font-weight: bold;font-size: 25px;">{{ $t(i18n.global.t('home.nodata')) }}
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>
<script lang="ts">
export default {
    name: "XIPO"
}
</script>
<script setup lang="ts">
import Item from '@/views/dashBoard/Main.vue';
import Nav from '@/views/dashBoard/nav/index.vue'
import IpoHeader from "./components/IpoHeader.vue"
import IpoNav from "./components/IpoNav.vue"
import IpoContent from "./components/IpoContent.vue"
import { ref, onMounted, onUpdated, computed } from "vue";
import type { TabsPaneContext } from 'element-plus'
import { ipoStore } from "@/stores/ipo"
import { useRoute } from 'vue-router'
import { getIpo, getOfferings, getTypeofListing } from '@/api/reqIpo/ipo'
import { getDataFromId } from "@/api/mock/home"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import moment from 'moment';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { resolve } from 'path-browserify';
const MockRes = ref<any>('')
const information11 = computed(() => {
    const { companyEngFull, companyEngShort, companyChiFull, companyChiShort, stkCode, isin, hkAddress, placeOfCorp } = MockRes.value;
    const placeOfincorporation = ref('')
    var obj = {
        1: proxy.$t('ipo.Bermuda'),
        2: proxy.$t('ipo.CaymanIslands'),
        3: proxy.$t('ipo.HongKongChina'),
        4: proxy.$t('ipo.PeoplesRepublicofChina'),
        5: proxy.$t('ipo.Australia'),
        6: proxy.$t('ipo.BritishVirginIslands'),
        7: proxy.$t('ipo.CanadaAlberta'),
        8: proxy.$t('ipo.CanadaBritishColumbia'),
        9: proxy.$t('ipo.CanadaOntario'),
        10: proxy.$t('ipo.England'),
        11: proxy.$t('ipo.Israel'),
        12: proxy.$t('ipo.Italy'),
        13: proxy.$t('ipo.Japan'),
        14: proxy.$t('ipo.Jersey'),
        15: proxy.$t('ipo.Luxembourg'),
        16: proxy.$t('ipo.Singapore'),
        17: proxy.$t('ipo.USDelaware'),
        99: proxy.$t('ipo.Others'),
    }
    if (isValidKey(placeOfCorp, obj)) {
        placeOfincorporation.value = obj[placeOfCorp]
    }
    function isValidKey(
        key: string | number | symbol,
        object: object
    ): key is keyof typeof object {
        return key in object;
    }

    const arr = [has_data(companyEngFull), has_data(companyEngShort), has_data1(companyChiFull), has_data2(companyChiShort), has_data(stkCode), has_data(isin), placeOfincorporation.value, hkAddress];
    arr[7].__proto__ = Array.prototype
    let infos = arr[7].map((obj: any) => {
        return obj.line
    })
    console.log('ARR', arr[7])
    console.log(companyChiFull);
    
    return [
        {
            name: proxy.$t('ipo.CompanyNameEnglishFull'),
            info: arr[0]
        },
        {
            name: proxy.$t('ipo.CompanyNameEnglishShort'),
            info: arr[1]
        },
        {
            name: proxy.$t('ipo.CompanyNameChineseFull'),
            info: arr[2]
        },
        {
            name: proxy.$t('ipo.CompanyNameChineseShort'),
            info: arr[3]
        },
        {
            name: proxy.$t('ipo.STockCode'),
            info: arr[4]
        },
        {
            name: proxy.$t('ipo.ISIN'),
            info: arr[5]
        },
        {
            name: proxy.$t('ipo.PlaceofIncorporation'),
            info: arr[6]
        },
        {
            name: proxy.$t('ipo.PrincipalPlaceofBussineseeinHongKong'),
            infos: infos
        }
    ]
})
const TypeOfListing11 = computed(() => {
    let { offerType, listSecurities, nomValue, nomCur, listPlatform, } = MockRes.value;
    var obj3 = {
        1: "HKD",
        2: "CNY",
        3: "USD",
        4: "AED",
        5: "ATS",
        6: "AUD",
        7: "BDT",
        8: "BEC",
        9: "BEL",
        10: "BHD",
        11: "BND",
        12: "BRC",
        13: "BRL",
        14: "BUK",
        15: "CAD",
        16: "CHF",
        17: "CYP",
        18: "DEM",
        19: "DKK",
        20: "ECU",
        21: "ESP",
        22: "EUR",
        23: "FIM",
        24: "FJD",
        25: "FRF",
        26: "GBP",
        27: "GGP",
        28: "IDR",
        29: "IEP",
        30: "IMP",
        31: "INR",
        32: "ITL",
        33: "JPY",
        34: "KES",
        35: "KRW",
        36: "KWD",
        37: "LBP",
        38: "LKR",
        39: "MOP",
        40: "MUR",
        41: "MYR",
        42: "NGN",
        43: "NIS",
        44: "NLG",
        45: "NOK",
        46: "NZD",
        47: "OMR",
        48: "PHP",
        49: "PKR",
        50: "PTE",
        51: "QAR",
        52: "RUB",
        53: "SAR",
        54: "SCR",
        99: "Others"
    }
    var obj2 = {
        1: proxy.$t('home.Mainboard'),
        2: proxy.$t('home.GEM')
    }
    var obj1 = {
        1: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
        2: proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
        3: proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
        4: proxy.$t('ipo.TypeofListing.Preferenceshares'),
        5: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
        6: proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
        7: proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
        8: proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
        99: proxy.$t('ipo.TypeofListing.Other'),
    }
    var obj = {
        1: proxy.$t('ipo.TypeofListing.Globalofferplacingandpublicoffer'),
        2: proxy.$t('ipo.TypeofListing.Byplacingonly'),
        3: proxy.$t('ipo.TypeofListing.Bypublicofferonly'),
        4: proxy.$t('ipo.TypeofListing.Byintroduction'),
        5: proxy.$t('ipo.TypeofListing.TransferfromGEM'),
    }

    if (isValidKey(offerType, obj)) {
        offerType = obj[offerType]
    }
    if (isValidKey(listSecurities, obj1)) {
        listSecurities = obj1[listSecurities]
    }
    if (isValidKey(listPlatform, obj2)) {
        listPlatform = obj2[listPlatform]
    }
    if (isValidKey(nomCur, obj3)) {
        nomCur = obj3[nomCur]
    }
    function isValidKey(
        key: string | number | symbol,
        object: object
    ): key is keyof typeof object {
        return key in object;
    }
    const arr = [
        { info: offerType },
        { info: listSecurities },
        { info: has_data(nomValue), info2: nomCur as any },
        { info: listPlatform },
        { info: has_data(listSecurities) },]
    return [
        {
            name: proxy.$t('ipo.TypeofListing.OfferingType'),
            info: arr[0].info
        },
        {
            name: proxy.$t('ipo.TypeofListing.SecuritiestobeListed'),
            info: arr[1].info
        },
        {
            name: proxy.$t('ipo.TypeofListing.NominalValueperShare'),
            info: arr[2].info,
            name2: proxy.$t('ipo.TypeofListing.NominalCurrency'),
            info2: arr[2].info2
        },
        {
            name: proxy.$t('ipo.TypeofListing.ListingPlatform'),
            info: arr[3].info
        },
       ]
})
const Offerings11 = computed(() => {
    const { tradeCurrency, downwardPriceFlex, priceMin, priceMax, priceFinal, boardLot, poReallocationCap, ioOfferSharesFinal, ipoShares, overallPoShares, overallIoShares, poSharesFinal, clawback, overallotOption, denomTable, upsizeOption } = MockRes.value;
    var dataObj = [
        { info: has_data(tradeCurrency) },
        { info: keepTwoDecimalStr1(downwardPriceFlex) },
        { info: has_data(priceMin?.toFixed(3)) + "-" + has_data(priceMax?.toFixed(3)), info2: has_data(priceFinal?.toFixed(3)) },
        { info: has_data(boardLot) },
        { info: keepTwoDecimalStr(poReallocationCap) },
        { info2s: has_data(ipoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), table: clawback },
        
        { info: has_data(overallPoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), info2: has_data(overallIoShares?.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')), },
        { info: has_data(upsizeOption?.toFixed(2), "%") },
        { table: denomTable }
    ]
    const arr = Offerings.value.map((item, index) => {
        const name = item.name;
        const info = dataObj[index].info;
        var filterObj = { name, info } as any;
        if (dataObj[index].info2 ) {
            filterObj.info2 = dataObj[index].info2
            filterObj.name2 = item.name2;
        }
        if (dataObj[index]?.info2s) {
            filterObj.info2s = dataObj[index].info2s
        }
        if (dataObj[index].table) {
            filterObj.table = { title: item.table?.title, lists: [] }
            filterObj.table.lists = dataObj[index].table.map((element: any) => {
                if (index == 8) {
                    //加逗号的函数 
                    function formatNumber(num: number | string) {
                        return num.toString().replace(/\d+/, function (n: string) {
                            return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
                        })
                    }
                    const { shares: number, value: persent } = element;
                    // console.log('ttttttttttttttttttt',persent);
                    let per = Number(persent)
                    return { number: formatNumber(number), persent: per && formatNumber(per.toFixed(2)) }
                } else {
                    const { threshold: number, allocation: persent } = element;

                    return { number, persent: keepTwoDecimalStr(persent) }
                }

            })
        }
        return filterObj
    })
    return [
        {
            name: proxy.$t('ipo.Offering.TradingCurrency'),
            info: arr[0].info
        },
        {
            name: proxy.$t('ipo.Offering.DownwardPriceFlexibility'),
            info: arr[1].info
        },
        {
            name: proxy.$t('ipo.Offering.OfferPriceRange'),
            info: arr[2].info,
            name2: proxy.$t('home.finalofferprice'),
            info2: arr[2].info2
        },
        {
            name: proxy.$t('ipo.Offering.TradingBoardLot'),
            info: arr[3].info
        },
        {
            name: proxy.$t('ipo.Offering.PublicOfferReallocationCap'),
            info: arr[4].info
        },
        {
            // name: proxy.$t('ipo.Offering.NumberofSharesHeldbyExistingShareholders'),
            // info: "100,000", 暂时不暂时的字段----
            // name: "",
            // info: "",
            name: proxy.$t('ipo.Offering.NumberofOfferShares'),
            info: arr[5].info2s,
            // info2s: arr[5].info2s,
            // rightMove:"translateX(-450px)",
            table: {
                title: [{ header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'), content: "number", width: isMobel() ? 33 : 50, align: "right" },
                { header: proxy.$t('ipo.Offering.PublicOfferAllocation'), content: "persent", width: isMobel() ? 38 : 50, align: "right" }],
                lists: arr[5].table.lists,
            }
        },
        {
            name: proxy.$t('ipo.Offering.NumberofPublicOfferShares'),
            info: arr[6].info,
            name2: proxy.$t('ipo.Offering.NumberofInsitutionalOfferShares'),
            info2: arr[6].info2,
        },
        {
            name: proxy.$t('ipo.Offering.OfferSizeAdjustmentOption'),
            info: arr[7].info,
        },
        // {暂时不暂时的字段--------
        //     name: proxy.$t('ipo.Offering.OverallotmentOptionInclusiveofOfferSizeAdjustmentOption'),
        //     info: "inclusive"
        // },
        // {暂时不暂时的字段-------------
        //     name: proxy.$t('ipo.Offering.OverallotmentOption'),
        //     info: "5.00%"
        // },
        {
            name: proxy.$t('ipo.Offering.DenominationTable'),
            table: {
                title: [{ header: proxy.$t('ipo.Offering.ApplicationQuantity'), content: "number", width: isMobel() ? 35 : 50, align: "right" },
                { header: proxy.$t('ipo.Offering.MaximumPayableonApplication'), content: "persent", width: 50, align: "right" }],
                lists: arr[8].table.lists,
            }
        }
    ]
})
const Advisers11 = computed(() => {
    let { designatedSponsor, sponsors, legalSponsor, legalIssuer, underwriters, advisers, overallCoordinators, distributors, hkSharereg } = MockRes.value;
    const arr = [
        { info: has_data(designatedSponsor) },
        { infos: filter(sponsors) },
        { infos: filter(legalSponsor) },
        { info: has_data(legalIssuer) },
        { infos: filter(underwriters) },
        { infos: filter(advisers) },
        { infos: filter(overallCoordinators) },
        { infos: filter(distributors) },
        { info: has_data(hkSharereg) }
    ]
    function filter(arr: any) {
        if (arr) {
            return arr.map((item: any) => item.member)
        } else {
            return "-";
        }

    }

    const arrData = Advisers.value.map((item: any, index: number) => {
        if (arr[index].info) {
            return { ...item, info: arr[index].info }
        } else {
            if (arr[index].infos?.length - 1 > 0) {
                let info2Top = -(arr[index].infos?.length * 22) + "px";
                return { ...item, infos: arr[index].infos, info2Top }
            } else {
                return { ...item, infos: arr[index].infos }
            }

        }
    })
    // console.log('arrData', arrData)
    return [
        {
            name: proxy.$t('ipo.advisers.DesignatedSponsor'),
            info: arrData[0].info
            // info2: "IBD-TEAM01"
        },
        {
            name: proxy.$t('ipo.advisers.Sponsor'),
            info: arrData[1].info,
            infos: arrData[1].infos,
        },
        {
            name: proxy.$t('ipo.advisers.HKLegalAdviserforSponsor'),
            infos: arrData[2].infos,
            info2Top: arrData[2].info2Top
        },
        {
            name: proxy.$t('ipo.advisers.HKLegalAdviser'),
            info: arrData[3].info
            // info2: "LEG_TEAM05"
        },
        {
            name: proxy.$t('ipo.advisers.Underwriter'),
            info: arrData[4].info,
            infos: arrData[4].infos,
        },
        {
            name: proxy.$t('ipo.advisers.Adviser'),
            info: arrData[5].info,
            infos: arrData[5].infos
        },
        {
            name: proxy.$t('ipo.advisers.OverallCoordinator'),
            infos: arrData[6].infos,
            // info2: "PLA_SYN_TEAM03",
            info2Top: arrData[6].info2Top,
        },
        {
            name: proxy.$t('ipo.advisers.Distributor'),
            infos: arrData[7].infos,
            info2Top: arrData[7].info2Top,
            // info2: "PLA_SYN_TEAM04"
        },
        {
            name: proxy.$t('ipo.advisers.HKShareRegistrar'),
            info: arrData[8].info,

        },
    ]
})
const Timetable11 = computed(() => {
    const { listingDate, bookOpenDate, bookCloseDate, pricingDate, allotmentDate, siInputDate, placingSharesDeliveryDate } = MockRes.value;

    const arr = [
        {
            info: timeTo(listingDate)[0], info2: timeTo(listingDate)[1],
            table: {
                lists: [{
                    number: timeTo(bookOpenDate)[0],
                    persent: timeTo(bookOpenDate)[1]
                }, {
                    number: timeTo(bookCloseDate)[0],
                    persent: timeTo(bookCloseDate)[1]
                }, {
                    number: timeTo(pricingDate)[0],
                    persent: timeTo(pricingDate)[1]
                }, {
                    number: timeTo(allotmentDate)[0],
                    persent: timeTo(allotmentDate)[1]
                }, {
                    number: timeTo(siInputDate)[0],
                    persent: timeTo(siInputDate)[1]
                }, {
                    number: timeTo(placingSharesDeliveryDate)[0],
                    persent: timeTo(placingSharesDeliveryDate)[1]
                }]
            }
        }
    ]
    const arrData = Timetable.value.map(item => {
        const isMobel = 768 >= document.documentElement.clientWidth;
        item.table.lists = item.table.lists.map((item, index) => {
            const { number, persent } = arr[0].table.lists[index]
            return { ...item, number, persent }
        })
        if (isMobel) {
            item.table.title = item.table.title.filter((element: any) => element.header)
            item.table.title = item.table.title.map((element: any, index: number) => {
                if (index == 0) {
                    element.width = 55;
                }
                return element
            })

        }
        return { ...item, info: arr[0].info, info2: arr[0].info2 }

    })
    function timeTo(time: string | null | undefined) {
        if (time) {
            return [moment(time).format("YYYY-MM-DD"), toEmpty(moment(time).format("HH:mm"))]
        } else {
            return ["-", "-"]
        }
        function toEmpty(time: string) {
            //如果时间戳转换出来是00:00 就返回空
            if (time == "00:00") {
                return ""
            } else {
                return time
            }
        }
    }
    const lists = arrData[0].table.lists;
    return [
        {
            name: proxy.$t('ipo.Timetable.CommencementofTradingDate'),
            info: arrData[0].info,
            name2: proxy.$t('ipo.Timetable.Time'),
            info2: arrData[0].info2,
            table: {
                title: [
                    { header: " ", content: "des", width: isMobel() ? 50 : 43, align: "left" },
                    { width: isMobel() ? 1 : 12 },  //通过加一段空结构来调整表头的位置
                    { header: proxy.$t('ipo.Timetable.Date'), content: "number", width: isMobel() ? 30 : 20, align: "left" },
                    { header: proxy.$t('ipo.Timetable.Time'), content: "persent", width: isMobel() ? 22 : 20, align: "left" }],
                lists: [
                    {
                        des: proxy.$t('ipo.Timetable.DealPublicOfferStartDate'),
                        number: lists[0].number,
                        persent: lists[0].persent
                    },
                    {
                        des: proxy.$t('ipo.Timetable.PublicOfferEndDate'),
                        number: lists[1].number,
                        persent: lists[1].persent,
                    },
                    {
                        des: proxy.$t('ipo.Timetable.ExpectedPriceDeterminationDate'),
                        number: lists[2].number,
                        persent: lists[2].persent,
                    },
                    {
                        des: proxy.$t('ipo.Timetable.AllotmentAnnouncementSharePostingCertificateDispatchDate'),
                        number: lists[3].number,
                        persent: lists[3].persent,
                    },
                    {
                        des: proxy.$t('ipo.Timetable.SettlementInstructionsInputDate'),
                        number: lists[4].number,
                        persent: lists[4].persent,
                    },
                    {
                        des: proxy.$t('ipo.Timetable.PredepositPlacingSharesDeliveryDate'),
                        number: lists[5].number,
                        persent: lists[5].persent,
                    }
                ]
            }
        }

    ]
})
const Documents11 = computed(() => {
    return [
        {
            name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
            info: Documents.value[0].info,
            name2: proxy.$t('ipo.Documents.ListingDocumentChinese'),
            info2: Documents.value[0].info2,
            href: Documents.value[0].href,
            href2: Documents.value[0].href2
        },
    ]
})
const Transaction11 = computed(() => {
    const { brokerage, sfcLevy, sehkTradingFee, afrcTransactionLevy } = MockRes.value;
    //console.log('@@11123', afrcTransactionLevy)
    const arr = [
        { info: has_data(brokerage?.toFixed(5), "%"), info2: has_data(sfcLevy?.toFixed(5), "%") },
        { info: has_data(sehkTradingFee?.toFixed(5), "%"), info2: has_data(afrcTransactionLevy?.toFixed(5), "%") },
    ]
    const arrData = Transaction.value.map((item, index) => {
        // if(arr[index].info == undefined){return ('-' as any)}
        // if(arr[index].info2 == null){return '-'}

        if (arr[index].info2) {
            return { ...item, info: arr[index].info, info2: arr[index].info2 }
        } else {
            return { ...item, info: arr[index].info }
        }
    })
    return [
        {
            name: proxy.$t('ipo.TransactionCosts.Brokerage'),
            info: arrData[0].info,
            name2: proxy.$t('ipo.TransactionCosts.SFCTransactionLevy'),
            info2: arrData[0].info2
        },
        {
            name: proxy.$t('ipo.TransactionCosts.SrockExchangeTradingFee'),
            info: arrData[1].info,
            name2: proxy.$t('ipo.TransactionCosts.AFRCTransactionLevy'),
            info2: arrData[1].info2
        },
    ]
})
const store = ipoStore();
const { proxy } = (getCurrentInstance() as any)
const i0 = ref()
const i1 = ref()
const i2 = ref()
const i3 = ref()
const i4 = ref()
const i5 = ref()
const i6 = ref()
const ipoNav = ref()
const isClickScroll = ref(false)
const data = ref({
    title: "-",
    number: 10000,
    HKD: "-",
    price: "-",
    time: "-",
    trading: "-"
},)

const Offerings = ref([
    {
        name: proxy.$t('ipo.Offering.TradingCurrency'),
        info: "-"
    },
    {
        name: proxy.$t('ipo.Offering.DownwardPriceFlexibility'),
        info: "0%"
    },
    {
        name: proxy.$t('ipo.Offering.OfferPriceRange'),
        info: "-",
        name2: proxy.$t('home.finalofferprice'),
        info2: "-",
    },
    {
        name: proxy.$t('ipo.Offering.TradingBoardLot'),
        info: "-"
    },
    {
        name: proxy.$t('ipo.Offering.PublicOfferReallocationCap'),
        info: "-"
    },
    {
        // name: proxy.$t('ipo.Offering.NumberofSharesHeldbyExistingShareholders'),
        // info: "100,000", 暂时不暂时的字段----
        name: "",
        info: "",
        name2: proxy.$t('ipo.Offering.NumberofOfferShares'),
        info2: "-",
        table: {
            title: [{ header: proxy.$t('ipo.Offering.InititalandClawbackThrehold'), content: "number", width: isMobel() ? 33 : 50, align: "right" },
            { header: proxy.$t('ipo.Offering.PublicOfferAllocation'), content: "persent", width: isMobel() ? 38 : 50, align: "right" }],
            lists: [
                {
                    number: '-',
                    persent: '-',
                },
                {
                    number: '-',
                    persent: '-',
                }, {
                    number: '-',
                    persent: '-',
                }, {
                    number: '-',
                    persent: '-',
                }]
        }
    },
    {
        name: proxy.$t('ipo.Offering.NumberofPublicOfferShares'),
        info: "-",
        name2: proxy.$t('ipo.Offering.NumberofInsitutionalOfferShares'),
        info2: "-"
    },
    {
        name: proxy.$t('ipo.Offering.OfferSizeAdjustmentOption'),
        info: "-"
    },
    // {暂时不暂时的字段--------
    //     name: proxy.$t('ipo.Offering.OverallotmentOptionInclusiveofOfferSizeAdjustmentOption'),
    //     info: "inclusive"
    // },
    // {暂时不暂时的字段-------------
    //     name: proxy.$t('ipo.Offering.OverallotmentOption'),
    //     info: "5.00%"
    // },
    {
        name: proxy.$t('ipo.Offering.DenominationTable'),
        table: {
            title: [{ header: proxy.$t('ipo.Offering.ApplicationQuantity'), content: "number", width: isMobel() ? 35 : 50, align: "right" },
            { header: proxy.$t('ipo.Offering.MaximumPayableonApplication'), content: "persent", width: 50, align: "right" }],
            lists: [
                {
                    number: '-',
                    persent: '-',
                },
                {
                    number: '-',
                    persent: '-',
                },
                {
                    number: '-',
                    persent: '-',
                },
                {
                    number: '-',
                    persent: '-',
                },
                {
                    number: '-',
                    persent: '-',
                }]
        }
    }
])
const Advisers = ref([
    {
        name: proxy.$t('ipo.advisers.DesignatedSponsor'),
        info: "-",
        // info2: "IBD-TEAM01"
    },
    {
        name: proxy.$t('ipo.advisers.Sponsor'),
        info: ""
    },
    {
        name: proxy.$t('ipo.advisers.HKLegalAdviserforSponsor'),
        infos: ["-"]
    },
    {
        name: proxy.$t('ipo.advisers.HKLegalAdviser'),
        info: "-",
        // info2: "LEG_TEAM05"
    },
    {
        name: proxy.$t('ipo.advisers.Underwriter'),
        info: ""
    },
    {
        name: proxy.$t('ipo.advisers.Adviser'),
        info: ""
    },
    {
        name: proxy.$t('ipo.advisers.OverallCoordinator'),
        infos: ["-"],
        // info2: "PLA_SYN_TEAM03",
        info2Top: ""
    },
    {
        name: proxy.$t('ipo.advisers.Distributor'),
        infos: ["-"],
        info2Top: "",
        // info2: "PLA_SYN_TEAM04"
    },
    {
        name: proxy.$t('ipo.advisers.HKShareRegistrar'),
        info: "-",

    },
])
const Timetable = ref([
    {
        name: proxy.$t('ipo.Timetable.CommencementofTradingDate'),
        info: "-",
        name2: proxy.$t('ipo.Timetable.Time'),
        info2: "-",
        table: {
            title: [
                { header: " ", content: "des", width: isMobel() ? 50 : 43, align: "left" },
                { width: 12 },  //通过加一段空结构来调整表头的位置
                { header: proxy.$t('ipo.Timetable.Date'), content: "number", width: isMobel() ? 30 : 20, align: "left" },
                { header: proxy.$t('ipo.Timetable.Time'), content: "persent", width: isMobel() ? 22 : 20, align: "left" }],
            lists: [
                {
                    des: proxy.$t('ipo.Timetable.DealPublicOfferStartDate'),
                    number: '-',
                    persent: '-'
                },
                {
                    des: proxy.$t('ipo.Timetable.PublicOfferEndDate'),
                    number: '-',
                    persent: '-'
                },
                {
                    des: proxy.$t('ipo.Timetable.ExpectedPriceDeterminationDate'),
                    number: '-',
                    persent: '',
                },
                {
                    des: proxy.$t('ipo.Timetable.AllotmentAnnouncementSharePostingCertificateDispatchDate'),
                    number: '-',
                    persent: '',
                },
                {
                    des: proxy.$t('ipo.Timetable.SettlementInstructionsInputDate'),
                    number: '-',
                    persent: '',
                },
                {
                    des: proxy.$t('ipo.Timetable.PredepositPlacingSharesDeliveryDate'),
                    number: '-',
                    persent: '',
                }
            ]

        }
    }

])
const Documents = ref([
    {
        name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
        info: "-",
        name2: proxy.$t('ipo.Documents.ListingDocumentChinese'),
        info2: "-",
        href: "",
        href2: ""
    },
])
const Transaction = ref([
    {
        name: proxy.$t('ipo.TransactionCosts.Brokerage'),
        info: "-",
        name2: proxy.$t('ipo.TransactionCosts.SFCTransactionLevy'),
        info2: "-"
    },
    {
        name: proxy.$t('ipo.TransactionCosts.SrockExchangeTradingFee'),
        info: "-",
        name2: proxy.$t('ipo.TransactionCosts.AFRCTransactionLevy'),
        info2: "-"
    },
])
const content = ref()
onMounted(

    () => {
        store.setActiveShow(3);
        store.setMobileActiveShow(3);//设置移动端弹窗高亮
 
        const obj = JSON.parse(sessionStorage.getItem('itemData') as string);
        data.value = obj
    
        getreferencedata()
        setDownLoad();
    }
)

const getreferencedata = async () => {
    const ipoID = sessionStorage.getItem('ipoID')
    const res = await getIpo(ipoID as string)
    MockRes.value = (res as any).data[0]
}


function isMobel() {
    return 768 >= document.documentElement.clientWidth;
}

//保留两位小数的函数
const keepTwoDecimalStr = (num: number) => {
    if (num) {
        const result = Number(num.toString().match(/^\d+(?:\.\d{0,2})?/));
        let s = result.toString();
        let rs = s.indexOf(".");
        if (rs < 0) {
            rs = s.length;
            s += ".";
        }
        while (s.length <= rs + 2) {
            s += "0";
        }
        return s + "%";
    } else {
        return "-"
    }

};
const keepTwoDecimalStr1 = (num: number) => {
    if (num) {
        const result = Number(num.toString().match(/^\d+(?:\.\d{0,2})?/));
        let s = result.toString();
        let rs = s.indexOf(".");
        if (rs < 0) {
            rs = s.length;
            s += ".";
        }
        while (s.length <= rs + 2) {
            s += "0";
        }
        return s + "%";
    } else {
        return "0%"
    }

};

function has_data1(str: string | null | undefined, str2: string = "") {
   if(MockRes.value.companyEngFull == MockRes.value.companyChiFull){
    return "-"
   }else if(str){
    return str ? str + str2 : "-"
   }else{
    return str ? str : "-"
   }

}
function has_data2(str: string | null | undefined, str2: string = "") {
   // console.log('$$', str,str2)
   if(MockRes.value.companyChiShort == MockRes.value.companyEngShort){
    return "-"
   }else if(str){
    return str ? str + str2 : "-"
   }else{
    return str ? str : "-"
   }

}
function has_data(str: string | null | undefined, str2: string = "") {
   // console.log('$$', str,str2)
    if (str) {
        return str ? str + str2 : "-"
    } else {
        return str ? str : "-"
    }

}
//滑动到指定列表
function scrollTo(stron: string) {
    isClickScroll.value = true;
    var obj = {
        i0TOP: i0.value.$el.offsetTop,
        i1TOP: i1.value.$el.offsetTop,
        i2TOP: i2.value.$el.offsetTop,
        i3TOP: i3.value.$el.offsetTop,
        i4TOP: i4.value.$el.offsetTop,
        i5TOP: i5.value.$el.offsetTop,
        i6TOP: i6.value.$el.offsetTop
    }
    if (isValidKey(stron, obj)) {
        // 滑动
        content.value.scrollTop = obj[stron] - obj.i0TOP;
    }
    setTimeout(() => {
        isClickScroll.value = false;
    })

    // 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
    function isValidKey(
        key: string | number | symbol,
        object: object
    ): key is keyof typeof object {
        return key in object;
    }

}
function contentScroll(e: any) {
    if (isClickScroll.value) return
    var obj = {
        i0TOP: i0.value.$el.offsetTop + 50,
        i1TOP: i1.value.$el.offsetTop,
        i2TOP: i2.value.$el.offsetTop,
        i3TOP: i3.value.$el.offsetTop,
        i4TOP: i4.value.$el.offsetTop,
        i5TOP: i5.value.$el.offsetTop,
        i6TOP: i6.value.$el.offsetTop
    }
    if (obj.i6TOP - obj.i0TOP < content.value.scrollTop) {
        ipoNav.value.ipoNavActive = 6
    } else if (obj.i5TOP - obj.i0TOP < content.value.scrollTop) {
        ipoNav.value.ipoNavActive = 5
    } else if (obj.i4TOP - obj.i0TOP < content.value.scrollTop) {
        ipoNav.value.ipoNavActive = 4
    } else if (obj.i3TOP - obj.i0TOP < content.value.scrollTop) {
        ipoNav.value.ipoNavActive = 3
    } else if (obj.i2TOP - obj.i0TOP < content.value.scrollTop) {
        ipoNav.value.ipoNavActive = 2
    } else if (obj.i1TOP - obj.i0TOP < content.value.scrollTop) {
        ipoNav.value.ipoNavActive = 1
    } else {
        ipoNav.value.ipoNavActive = 0
    }

}
async function setDownLoad() {
    
    const ipoID = sessionStorage.getItem('ipoID');
    const res = await getIpo(ipoID as string)
    const enHref = `${(res as any).data[0].pdfLink.eLink}`;
    const chinaHref = `${(res as any).data[0].pdfLink.cLink}`;
    // const isDownLoad = await exportClick(enHref);
    // const isDownLoad2 = await exportClick(chinaHref);
    console.log('isDownLoad',enHref,typeof enHref);
    console.log('isDownLoad2',chinaHref)
        Documents.value = [
        {
            name: proxy.$t('ipo.Documents.ListingDocumentEnglish'),
            info: enHref&&enHref!='null' ? "ipo.pdf" : "-",
            name2: proxy.$t('ipo.Documents.ListingDocumentChinese'),
            info2: chinaHref&&chinaHref!='null'  ? "ipo.pdf" : "-",
            href: enHref,
            href2: chinaHref
        },
    ]
    
   
   
}

const exportClick = (href: any) => {
    const downUrl = href.split("https://www1.hkexnews.hk")[1]
    return new Promise((resolve) => {
        axios
            .get("file" + downUrl)
            .then(() => {
                resolve(true)

            })
            .catch(() => {
                resolve(false)
                // ElMessage.error("链接已失效");
            });
    })

}

</script>
<style lang="scss" scoped>
.login2 {
    height: 100vh;
    overflow: hidden;
    @media screen and (max-width: 768px) {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("@/assets/1x/beijingtu.png");
        background-repeat: no-repeat;
        background-size: cover;
    }
}

//取消滚动条样式
::-webkit-scrollbar {
    display: none;
}

.wrap {
    display: flex;
    padding-top: 30px;
    height: 100%;
    width: 1400px;
    @media screen and (max-width: 768px) {

        padding-top: 10px;
        width: 100vw;
        overflow: hidden;
    }

    .leftbox {
        width: 22%;
        height: 100%;

        @media screen and (max-width: 768px) {
            display: none;
        }
    }

    .rightbox {
        padding-top: 30px;
        width: 78%;
        height: 100%;
        padding-left: 20px;

        @media screen and (max-width: 768px) {
            padding-top: 0px;
            padding-left: 0px;
            width: 100vw;
            overflow: hidden;
        }
    }

    .content {
        width: 100%;
        //height: 550px;
        height: 660px;
        margin-top: 11px;
        overflow: scroll;

        @media screen and (max-width: 768px) {
            height: 80vh;
        }
    }

    .demo-tabs>.el-tabs__content {
        padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
   
    }
}

:deep(.el-table__header) {
    font-size: 18px;
}

:deep(.el-table td.el-table__cell div) {
    font-size: 18px;
}

</style>